<template>
  <div class="box">
    <header class="header">
      <ul>
        <h4 style="color:green;">豆瓣</h4>
        <van-search v-model="value" shape="round" placeholder="搜索" />
        <van-icon name="cashier-o" size="22" />
        <van-button size="small" type="success">打开APP</van-button>
      </ul>
    </header>
    <div class="contnet">
      <h3>找电影</h3>
      <van-card
        v-for="item in list"
        :key="item.id"
        :title="item.title"
        :thumb="item.image"
        @click="$router.push(`/detaliA/${item.id}`)"
      />
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item" :title="item" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup>
import { ref } from "vue";
const list = ref([
  {
    id: 1,
    image: require("../../assets/tu1.jpg"),
    title: "彗星来的那一夜"
  },
  {
    id: 2,
    image: require("../../assets/tu2.jpg"),
    title: "银河护卫队3"
  },
  {
    id: 3,
    image: require("../../assets/tu3.jpg"),
    title: "看不见的客人"
  },
]);
</script>
<style lang="scss">
.header {
  top: 0;
  left: 0;
  ul {
    display: flex;
  }
}
</style>